<template>
  <div class="container">
    <normal-title
      title="物流信息"
      :back="true"
    ></normal-title>
   

  </div>
</template>

<script>
import { request } from "@/utils";
import NormalTitle from "@/components/NormalTitle";
export default {
  components: {
    NormalTitle
  },
  data() {
    return {
      images: [
        "../../images/comment_img.png",
        "../../images/swiper_1.png",
        "../../images/comment_img.png"
      ],
      levelRow1: 0,
      levelRow2: 0,
      levelRow3: 0
    };
  },
  computed:{
    prompt(){
      if(this.images.length){
        return this.images.length+"/3"
      }else{
        return "添加图片"
      }
    }
  },
  methods: {
    addPic() {
      var _this = this;
      if (_this.images.length < 3) {
        wx.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ["album", "camera"],
          success(res) {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths;
            _this.images.push(tempFilePaths);
          }
        });
      }
    },
    preView(item) {
      // wx.previewImage({
      //   current: "item",// 当前显示图片的http链接
      //   urls :this.images
      // });
    },
    delPic(index) {
      this.images.splice(index, 1);
    }
  },
  mounted() {}
};
</script>

<style>
page {
  height: 100%;
}
.placeholder-style {
  color: #cacaca;
  font-size: 16px;
}
</style>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;

  font-size: 26rpx;
  .row {
    display: flex;
    align-items: center;
  }
  .comment {
    background: #f6f6f6;
    margin-top: 30rpx;
    padding: 25rpx;
    margin: 0 25rpx;
    .textarea {
      width: 100%;
      height: 200rpx;
      // background: red;
      font-size: 30rpx;
      z-index: 0;
    }
    .add-pic {
      margin-top: 25rpx;
      .btn-add {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 140rpx;
        background: #ebebeb;
        width: 140rpx;
        img {
          width: 60rpx;
          height: 60rpx;
        }
        .imgNum {
          font-size: 24rpx;
          color: #909090;
        }
      }
      .pre-view {
        font-size: 0;
        margin-right: 25rpx;
        position: relative;
        img {
          width: 140rpx;
          height: 140rpx;
        }
        .del-pic {
          position: absolute;
          z-index: 5;
          font-size: 40rpx;
          background: rgba(200, 200, 200, 0.5);
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          line-height: 35rpx;
          text-align: center;
          top: 0;
          right: 0;
          color: white;
          margin-right: -20rpx;
          margin-top: -20rpx;
        }
      }
    }
  }
  .slice {
    width: 750rpx;
    height: 20rpx;
    background: #f0f0f0;
    margin: 30rpx 0 60rpx;
  }
  .grade {
    margin: 0 25rpx;
    font-size: 36rpx;
    .grade-type {
      margin-bottom: 50rpx;
      .stars {
        position: relative;
        .sel {
          position: absolute;
          top: 0;
          left: 0;
        }
        .star {
          width: 60rpx;
          height: 60rpx;
          margin-right: 30rpx;
        }
      }
      .grade-title {
        margin-right: 40rpx;
      }
    }
  }
  .btn-fixed {
    width: 750rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    font-size: 40rpx;
    background: #cdb27e;
  }
}
</style>




